<template>
	<view>
		<view class="top">
			<navigator url="../personal_center/my" >
				<image class="image-bg" :src="avatarUrl" style="width: 130rpx;height: 130rpx;border-radius: 50%;"></image>
			</navigator>	
					
			<view class="name">{{nickName}}</view>
			<view v-if="token.indexOf('Bearer') != -1" class="bon1">已认证</view>
			<navigator class="bon" v-else-if="token=='0'" url="../hservice/hservice">
				<view >去认证</view>
			</navigator>			
			<navigator v-else class="bon" url="../register/register">
				<view >去认证</view>
			</navigator>
			
			</image>
		</view>

		<view class="tr">
			<navigator url="card">
				<view class="tab">电子校友卡</view>
			</navigator>
			<navigator url="../personal_center/build">
				<view class="tab">创建群组</view>
			</navigator>
			<navigator url="address">
				<view class="tab">校友通讯录</view>
			</navigator>
			<navigator url="dept">
				<view class="tab">已加入校友会</view>
			</navigator>
			<navigator url="apply">
				<view class="tab">报名校庆活动</view>
			</navigator>
			<navigator url="authen">
				<view class="tab">好友申请</view>
			</navigator>
			<navigator url="main">
				<view class="tab">关于我们</view>
			</navigator>

		</view>
	</view>


</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {		
		data() {
			return {
				
			}
		},
		computed:{
		   ...mapState(['avatarUrl', 'nickName', 'openid', 'token'])
		},
		onLoad: function(options) {
			console.log(this.token);
		},
		methods: {
			...mapMutations(['login']),
			//获取姓名
			
		}
	}
</script>

<style>
	.top {
		height: 200rpx;
		border-bottom: 1px solid #ccc;
		margin: 2px 8px;

	}

	.image-bg {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	
	.bon {
		width: 100rpx;
		height: 35rpx;
		font-size: 25rpx;
		margin-top: -10rpx;
		margin-left: 180rpx;
		background-color: #F1F1F1;
		text-align: center;
		color: #808080;
		border-radius: 5%;
		/* align-items: center; */
	}

	.bon1 {
		width: 100rpx;
		height: 35rpx;
		font-size: 25rpx;
		margin-top: -10rpx;
		margin-left: 180rpx;
		background-color: #255BBA;
		text-align: center;
		color: #FFFFFF;
		border-radius: 5%;
		/* align-items: center; */
	}

	.name {
		font-size: 38rpx;
		margin: 20rpx;
		margin-left: 180rpx;
		margin-top: -125rpx;
	}

	.tab {
		font-size: 30rpx;
		height: 100rpx;
		text-align: left;
		border-bottom: 1px solid #ccc;
		color: #555555;
		align-items: center;
		display: flex;
		justify-content: left;

	}

	.tr {
		margin: 2px 8px;
		justify-content: space-between;
		height: 40px;
	}
</style>
